<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{admin/adminCommons :: top_head(~{::title})}">
    <title>后台博客管理</title>
</head>
<body>
<!--导航栏-->
<nav th:replace="~{admin/adminCommons :: top_nav_bar(1)}"></nav><!--中间内容-->
<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <a href="#" th:href="@{/admin/addBlog}" class="item">发布文章</a>
        <a href="#" th:href="@{/admin/blogs}" class="active teal item">文章列表</a>
    </div>
</div>
<!--中间内容-->
<div class="cus-padding-top-bottom-massive">
    <div class="ui container cus-container-width">
        <div class="ui container">
            <form class="ui segment middle form">
                <input type="hidden" name="pageNum" th:value="${page.pageNum}">
                <div class="inline fields">
                    <div class="field">
                        <input id="title_input" type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div id="type-dropdown" class="ui search selection dropdown">
                            <input type="hidden" name="typeId">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div th:each="type:${types}" th:text="${type.name}" th:data-value="${type.id}"
                                     class="item" data-value="0">more
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="recommend" id="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <button type="button" id="search_btn" class="ui teal button">搜索</button>
                    </div>
                    <div class="field">
                        <button class="ui button" id="clear_btn">清除</button>
                    </div>
                </div>
            </form>
            <div id="table-container">
                <div id="success_msg" class="ui success message" th:unless="${#strings.isEmpty(msg)}">
                    <div class="header">提示：</div>
                    <p th:text="${msg}"></p>
                </div>
                <table th:fragment="blogList" class="ui table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>分类</th>
                        <th>类型</th>
                        <th>发布状态</th>
                        <th>是否推荐</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="blog:${page.list}">
                        <td th:text="${blog.id}"></td>
                        <td th:text="${blog.title}"></td>
                        <td th:text="${blog.type.name}"></td>
                        <td th:text="${blog.published}==true?'已发布（可见）':'未发布（不可见）'"></td>
                        <td th:text="${blog.recommend}==true?'推荐':'未推荐'"></td>
                        <td th:text="${#dates.format(blog.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a href="#" th:href="@{/admin/updateBlog/{blogId}(blogId=${blog.id})}"
                               class="ui mini teal button">编辑</a>
                            <a href="#" th:href="@{/admin/blogs/delete/{blogId}(blogId=${blog.id})}"
                               class="ui mini red button">删除</a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th colspan="8">
                            <div class="ui pagination menu">
                                <a class="icon item" onclick="page(this)" th:attr="data-page=${page.getPageNum()-1}"
                                   th:unless="${page.isFirstPage}">
                                    <i class="iconfont icon-B icon"></i>上一页
                                </a>
                                <div th:each="page:${page.navigatepageNums}" class="ui pagination menu">
                                    <a onclick="page(this)" th:attr="data-page=${page}" th:text="${page}"
                                       class="item">1</a>
                                </div>
                                <a class="icon item" onclick="page(this)" th:attr="data-page=${page.getPageNum()+1}"
                                   th:unless="${page.isLastPage}">
                                    <i class="iconfont icon-B icon"></i>下一页
                                </a>
                            </div>
                            <a th:href="@{/admin/addBlog}" class="ui right floated teal basic button">添加</a>
                        </th>
                    </tr>
                    </tfoot>
                </table>

            </div>
        </div>
    </div>
</div>
<!--底部内容-->
<footer th:replace="~{admin/adminCommons :: footer_nav_bar}"></footer>
<script type="text/javascript">
    // 鼠标点击分类弹出下拉菜单
    $('#type-dropdown').dropdown();

    page = (obj) => {
        $("[name='pageNum']").val($(obj).data("page"));
        loadPage();
    }

    $("#search_btn").click(() => {
        loadPage();
    });

    $("#success_msg").on('click', () => {
        $(this).closest("#success_msg").transition("fade");
    });

    loadPage = () => {
        $("#table-container").load("/admin/blogs/search", {
            title: $("[name='title']").val(),
            typeId: $("[name='typeId']").val(),
            recommend: $("[name='recommend']").prop('checked'),
            pageNum: $("[name='pageNum']").val()
        });
    }

    $("#clear_btn").on("click", () => {
        $("#type-dropdown").dropdown("clear")
        $("#title_input").val(null);
    })
</script>
</body>
</html>